<template>
    <el-dialog title="筛选" v-model="dialogVisible" width="60%" :before-close="beforeClose">
        <el-form ref="form" :model="formData" label-width="120px">
            <el-form-item label="排序">
                <el-select-v2 v-model="formData.sort" :options="sortOptions" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="选择日期">
                <el-date-picker
                    v-model="formData.date"
                    type="daterange"
                    unlink-panels
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :shortcuts="shortcuts"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="formData.author" placeholder="" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
    import { defineComponent, reactive, watch, toRefs } from 'vue'
    import { useStore } from 'vuex'

    export default defineComponent({
        name: 'FilterDialog',
        setup() {
            const store = useStore()

            const sortOptions = [
                { label: '时间由早到晚', value: 'timeAsc' },
                { label: '时间由晚到早', value: 'timeDesc' },
            ]
            const state = reactive({
                dialogVisible: false,
                formData: {
                    sort: 'timeAsc',
                    date: '',
                    author: '',
                },
                shortcuts: [
                    {
                        text: '上周',
                        value: () => {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            return [start, end]
                        },
                    },
                    {
                        text: '上个月',
                        value: () => {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            return [start, end]
                        },
                    },
                    {
                        text: '前三个月',
                        value: () => {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            return [start, end]
                        },
                    },
                ],
            })

            watch(
                () => store.state.filterDialog.visible,
                (nval) => {
                    state.dialogVisible = nval
                },
                { immediate: true }
            )

            function beforeClose() {
                store.commit('filterDialog/setVisible')
            }

            function cancel() {
                store.commit('filterDialog/setVisible')
            }

            function comfirm() {
                store.commit('filterDialog/setVisible')
            }

            return {
                ...toRefs(state),
                sortOptions,
                comfirm,
                cancel,
                beforeClose,
            }
        },
    })
</script>

<style></style>
